<script setup>
import ChildrenComment from './ChildrenComment.vue'
import PostComment from './PostComment.vue'
import { ref } from 'vue'
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { props } = defineProps(['comments', 'parentName', 'newsId'])

//回复组件启用
const post = ref({})
const reply = (commentId) => {
  post.value[commentId] = !post.value[commentId]
}
</script>

<template>
  <div v-for="comment in comments" :key="comment.commentId">
    <div class="divider"></div>
    <div class="comment-box">
      <el-avatar :size="50" :src="comment.userAvatar" style="min-width: 50px"></el-avatar>
      <div class="comment-content">
        <div class="user-name">{{ comment.userName }}</div>
        <div class="comment">{{ comment.commentContent }}</div>
        <div class="comment-footer">
          <div>{{ comment.commentTime }}</div>
          <div class="reply" @click="reply(comment.commentId)">回复</div>
        </div>
        <div v-if="post[comment.commentId]">
          <PostComment :commentId="comment.commentId" :newsId="newsId"></PostComment>
        </div>
      </div>
    </div>
    <div>
      <ChildrenComment
        v-if="comment.children && comment.children.length > 0"
        :comments="comment.children"
        :parentName="comment.userName"
        :newsId="newsId"
      />
    </div>
  </div>
</template>

<style scoped>
.divider::before {
  content: '';
  background-color: #e3e3e3;
  height: 0.1px;
  border-radius: 10px;
  display: block;
  margin: 0 auto; /* 居中显示 */
  display: block;
  margin-left: 70px;
}
.comment-box {
  display: flex;
  margin: 20px 0;
  line-height: 27px;
  font-family: '等线', sans-serif;
  font-weight: bold;
  font-size: 17px;
}
.comment-content {
  margin-left: 20px;
  width: 100%;
}
.user-name {
  color: palevioletred;
  margin-bottom: 10px;
}
.comment {
  overflow: hidden;
  width: 100%;
  color: black;
}
.comment-footer {
  font-size: 13px;
  margin-top: 10px;
  color: #828181;
  display: flex;
}
.reply {
  margin-left: 15px;
}
</style>
